<template>
	<view>
		<view class="house-box flex-center" @click="handleHouse">
			<image class="home-img" :src="userInfo.level === 1 ? '/static/img/house1.png' : '/static/img/house2.png'" mode="aspectFill"></image>
			<view class="gg-tips">{{ $t('navigation.storehouse', 'Storehouse') }}</view>
		</view>

		<!-- 仓库弹窗 -->
		<uni-popup ref="storeHousePopup" type="center">
			<view class="store-house-pup-box model-content">
				<image src="/static/img/close.png" class="close-img" @click="closeStoreHousePopup" />
				<view class="title">{{ $t('storehouse.storehouse', 'STOREHOUSE') }}</view>
				<swiper class="swiper" :indicator-dots="false" :autoplay="false">
					<swiper-item>
						<view class="contents">
							<!-- 这里可以添加仓库物品列表 -->
							<view class="shop-item" v-for="(item, index) in storeItems" :key="index"
								@click="handleSelectItem(item)">
								<image class="shop-img" :src="projectConfig.imgPrefix + item.image" />
								<view class="number">x{{ item.num }}</view>
								<view class="price">
									<image class="u-img" src="/static/img/utsd.png" />
									<text class="text">{{ item.price }}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="sumbit-btn" @click="handleOpenUpgradePopup">{{ $t('storehouse.upgrade', 'UPGRADE') }}</view>
			</view>
		</uni-popup>

		<!-- 点击仓库物品出售弹窗 -->
		<uni-popup ref="sellPopup" type="center">
			<view class="sellPopup-box model-content">
				<image src="/static/img/close.png" mode="aspectFit" class="close-img" @click="closeSellPopup" />
				<view class="title text-overflow">{{ $t('storehouse.storehouse', 'STOREHOUSE') }}</view>
				<view class="contents">
					<image class="greens-deta" :src="projectConfig.imgPrefix + currentItem.image" />
					<view class="flex-lr deta-list">
						<view>{{ $t('storehouse.price', 'Price') }}：</view>
						<view class="flex-r">
							<image class="coin" src="/static/img/utsd.png" />
							<view class="num">{{ currentItem.price }}</view>
						</view>
					</view>
					<view class="flex-lr deta-list">
						<view>{{ $t('storehouse.current_inventory', 'Current inventory') }}：</view>
						<view class="num">{{ currentItem?.num || '0' }}</view>
					</view>
					<view class="flex-lr deta-list">{{ $t('storehouse.material_description', 'Material description') }}：</view>
					<view class="deta-title">{{ getItemDisplayName(currentItem) }}</view>
					<view class="flex-lr sd-count-wrap">
						<view class="count-item flex-lr">
							<image class="js-icon" src="/static/img/jian.png" @click="decreaseCount" />
							<view>{{ sellCount }}</view>
							<image class="js-icon" src="/static/img/jia.png" @click="increaseCount" />
						</view>
						<view class="count-item flex-lr">
							<image class="js-icon" src="/static/img/utsd.png" />
							<view>{{ totalPrice }}</view>
						</view>
					</view>
				</view>
				<view class="copy-btn" @click="handleSell">{{ $t('storehouse.sell', 'SELL') }}</view>
			</view>
		</uni-popup>

		<!-- 仓库升级弹窗 -->
		<uni-popup ref="upgradePopup" type="center">
			<view class="upgradePopup-box model-content">
				<image src="/static/img/close.png" mode="aspectFit" class="close-img" @click="closeUpgradePopup" />
				<view class="title text-overflow">{{ $t('storehouse.upgrade_storehouse', 'Upgrade Storehouse') }}</view>
				<view class="contents">
					<view class="flex-lr updeta-wraps">
						<view class="up-items">
							<image style="width: 104px;" class="home-img" src="/static/img/house1.png" />
							<image style="width: 26px;" class="level-img" src="/static/img/level1.png" />
						</view>
						<image class="update-up" src="/static/img/update.png" />
						<view class="up-items">
							<image style="width: 108px;" class="home-img" src="/static/img/house2.png" />
							<image style="width: 36px;" class="level-img" src="/static/img/level2.png" />
						</view>
					</view>
					<view class="stuff-wrap flex-center">
						<view class="stu-items flex-center">
							<image class="stu-icon" src="/static/img/cutter.png" />
							<view>-2</view>
						</view>
						<view class="stu-items flex-center">
							<image class="stu-icon" src="/static/img/stone.png" />
							<view>-2</view>
						</view>
						<view class="stu-items flex-center">
							<image class="stu-icon" src="/static/img/wood.png" />
							<view>-2</view>
						</view>
					</view>
				</view>
				<view class="sumbit-btn" @click="handleUpgrade">{{ $t('storehouse.upgrade', 'Upgrade') }}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { farmApi } from '@/request/farm.js'
import { userApi } from '@/request/user.js'
import { mapState, mapGetters } from 'vuex'
import projectConfig from '@/config/project.json'
import { languageMixin } from '@/utils/language-mixin.js'
export default {
	name: 'HouseBox',
	mixins: [languageMixin],
	data() {
		return {
			projectConfig,
			storeItems: [],
			currentItem: {},
			sellCount: 0,
			totalPrice: 0,
			upgradeMaterialConfig: {
				cutter: 2,
				stone: 2,
				wood: 2
			}
		}
	},
	computed: {
		...mapState('user', ['friendHomeMode', 'userInfo'])
	},
	methods: {
		handleHouse() {
			if (!this.friendHomeMode) {
				this.fetchStoreItems()
				this.$refs.storeHousePopup.open();
			}
		},

		closeStoreHousePopup() {
			this.$refs.storeHousePopup.close();
		},

		async fetchStoreItems() {
			try {
				const res = await farmApi.getUserProductStore({ page: 1, limit: 100 })
				if (res.code === 200) {
					this.storeItems = res.data
				}
			} catch (e) {
				console.error('获取仓库物品失败', e)
			}
		},

		closeSellPopup() {
			this.$refs.sellPopup.close();
		},

		decreaseCount() {
			if (this.sellCount > 1) {
				this.sellCount--;
				this.totalPrice = this.currentItem.price * this.sellCount;
			}
		},

		increaseCount() {
			if (this.sellCount < this.currentItem.num) {
				this.sellCount++;
				this.totalPrice = this.currentItem.price * this.sellCount;
			}
		},

		handleSelectItem(item) {
			this.currentItem = item;
			this.sellCount = item.num;
			this.totalPrice = item.price * this.sellCount;
			this.$refs.sellPopup.open();
		},

		async handleOpenUpgradePopup() {
			try {
				const res = await farmApi.getUpgradeMaterial('1')
				if (res.code === 200) {
					this.upgradeMaterialConfig = res.data
				}
			} catch (e) {
				console.error('获取升级材料配置失败', e)
			}

			this.$refs.storeHousePopup.close();
			this.$refs.upgradePopup.open();
		},

		closeUpgradePopup() {
			this.$refs.upgradePopup.close();
		},

		async handleSell() {
			try {
				const res = await farmApi.payHarvest({ num: this.sellCount, seedId: this.currentItem.seed_id })
				if (res.msg === '200') {
					this.fetchStoreItems()
					const userInfo = await userApi.getUserInfo()
					this.$store.dispatch('user/setUserInfo', userInfo.data)
				}
			} catch (e) {
				console.error('出售仓库物品失败', e)
			}
			this.$refs.sellPopup.close();
		},

		async handleUpgrade() {
			try {
				const res = await farmApi.upgradeStorehouse()
				const userInfo = await userApi.getUserInfo()
				this.$store.dispatch('user/setUserInfo', userInfo.data)
				if (res.msg === '200') {
					this.fetchStoreItems()
				}
			} catch (e) {
				console.error('升级仓库失败', e)
			}
			this.$refs.upgradePopup.close();
		},
		
		// 获取物品显示名称（使用多语言）
		getItemDisplayName(item) {
			return this.translateItemName(item)
		}
	}
}
</script>

<style scoped lang="scss">
.house-box {
	background-size: 100% 100%;
	position: absolute;
	top: 78px;
	left: 0;
	z-index: 90;
	width: 192px;
	height: 194px;

	.home-img {
		width: 100%;
		height: 110px;
	}

	.gg-tips {
		width: 87px;
		position: absolute;
		top: 10px;
	}
}

.store-house-pup-box {
	position: relative;
	background: url(/static/img/bg6.png) no-repeat;
	background-size: 100%;
	width: 351px;

	.close-img {
		position: absolute !important;
		width: 52px;
		height: 52px;
		right: 8px;
		top: 41px;
		z-index: 2;
	}

	.title {
		color: #a03b30;
		font-size: 22px;
		font-weight: 700;
		margin-top: 8px;
		text-align: center;
	}

	.swiper {
		height: 452px;
	}

	.contents {
		height: 452px;
		padding-top: 36px;
		flex-wrap: wrap;
		padding-left: 10px;
		padding-right: 15px;
		box-sizing: border-box;

		.shop-item {
			width: 33.33%;
			display: inline-block;
			float: left;
			height: 74px;
			text-align: center;
			margin-bottom: 22px;
			position: relative;

			.shop-img {
				width: 47px;
				height: 47px;
				text-align: center;
			}

			.number {
				position: absolute;
				height: 18px;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 9px;
				color: #fedd6c;
				font-size: 14px;
				font-weight: 700;
				padding: 0 8px;
				box-sizing: border-box;
				top: 0;
				right: 7px;
				text-align: center;
				line-height: 18px;
			}

			.price {
				width: 74px;
				height: 17px;
				background: #ffc272;
				box-shadow: 0 1px 0 0 #bd7d2a, 0 3px 5px 0 rgba(98, 32, 29, 0.58);
				border-radius: 5px;
				margin: 0 auto;
				margin-top: 8px;
				color: #fedd6c;
				font-size: 15px;
				font-weight: 700;
				display: flex;
				align-items: center;
				justify-content: center;

				.u-img {
					width: 14px;
					height: 14px;
					margin-right: 2px;
					margin-top: 1px;
				}

				.text {
					transform: scale(0.8);
					text-shadow: 1px 1px #de8a53;
					color: #fff;
				}
			}
		}
	}

	.sumbit-btn {
		width: 170px;
		height: 63px;
		background: url(/static/img/upgrade.png) no-repeat;
		background-size: 100%;
		padding-top: 14px;
		color: #2c750e;
		line-height: 34px;
		text-align: center;
		margin: 0 auto;
		margin-top: 5px;
		font-size: 18px;
		font-weight: 700;
		cursor: pointer;
	}
}

.sellPopup-box {
	position: relative;
	background: url(/static/img/bg5.png) no-repeat;
	background-size: 100%;
	width: 256px;
	height: 418px;

	.close-img {
		position: absolute !important;
		width: 37px;
		height: 37px;
		right: -7px;
		top: 12px;
	}

	.title {
		color: #fef9e2;
		font-weight: 700;
		font-size: 17px;
		text-align: center;
	}

	.contents {
		padding: 33px 0 2px;
		overflow: initial;
		height: 254px;

		.greens-deta {
			width: 66px;
			height: 68px;
			text-align: center;
			margin-top: -16px;
			margin-bottom: 5px;
		}

		.deta-list {
			width: 100%;
			margin-bottom: 6px;
			color: #885625;
			font-size: 15px;
			font-weight: 700;

			.coin {
				width: 14px;
				height: 14px;
				margin-right: 2px;
			}

			.num {
				color: #ff9d1f;
				font-size: 15px;
				font-weight: 700;
			}
		}

		.deta-title {
			color: #5c8a50;
			font-size: 13px;
			font-weight: 700;
			text-align: left;
			height: 41px;
		}

		.sd-count-wrap {
			width: 100%;
			margin-bottom: 11px;

			.count-item {
				width: 87px;
				height: 24px;
				background: #5c8a50;
				box-shadow: 0 1px 2px 0 #43573f;
				border-radius: 12px;
				color: #fff;
				font-size: 18px;
				font-weight: 700;

				.js-icon {
					width: 31px;
					min-width: 31px;
					height: 31px;
					margin-left: -6px;
					margin-top: 3px;
				}
			}
		}
	}

	.copy-btn {
		width: 135px;
		height: 39px;
		line-height: 34px;
		text-align: center;
		margin: 0 auto;
		margin-top: 5px;
		background: url(/static/img/btn-bg.png) no-repeat;
		background-size: 100%;
		color: #fff;
		font-size: 18px;
		font-weight: 700;
	}
}

.upgradePopup-box {
	position: relative;
	background: url(/static/img/bg7.png) no-repeat;
	background-size: 100%;
	height: 320px;
	width: 312px;
	min-height: 194px;
	padding: 7px 15px;
	box-sizing: border-box;

	.close-img {
		position: absolute !important;
		width: 36px;
		height: 36px;
		right: -7px;
		top: 12px;
	}

	.title {
		color: #fef9e2;
		font-weight: 700;
		font-size: 17px;
		text-align: center;
	}

	.contents {
		height: auto;
		padding-top: 35px;
		padding-left: 10px;
		padding-right: 15px;
		box-sizing: border-box;

		.updeta-wraps {
			width: 100%;
			margin-bottom: 20px;

			.up-items {
				text-align: center;

				.home-img {
					position: relative;
					width: 108px;
					height: 60px;
					text-align: center;
					margin-bottom: 2px;
					display: block;
					margin: 0 auto;
				}

				.level-img {
					width: 27px;
					height: 33px;
					text-align: center;
					display: block;
					margin: 0 auto;
					margin-top: 5px;
				}
			}

			.update-up {
				width: 35px;
				height: 32px;
				margin-top: -70px;
			}
		}

		.stuff-wrap {
			margin-bottom: 13px;

			.stu-items {
				margin: 0 6px;
				color: #885625;
				font-size: 18px;
				font-weight: 700;

				.stu-icon {
					width: 22px;
					height: 22px;
					margin-right: 7px;
				}
			}
		}
	}

	.sumbit-btn {
		width: 130px;
		height: 52px;
		text-align: center;
		line-height: 33px;
		margin: 0 auto;
		margin-top: 5px;
		background: url(/static/img/btn-bg.png) no-repeat;
		background-size: 100%;
		color: #fff;
		font-size: 18px;
		font-weight: 700;
	}
}
</style>